<template>
  <ga-drawer
    width="50%"
    :visible="visible"
    @ok="handleOk"
    :footer="false"
    :header="false"
    :mask="true"
    @close="handleCancel"
    class="vm_detail_drawer"
  >
    <div class="vm_detail_tlt flex_between_aligncenter">
      <div class="vm_name">
        {{ record?.name }} 详情
        <TagStatus
          style="margin-left: 16px"
          :type="record.vmStatus"
          bordered
          size="medium"
        />
      </div>
      <div class="vm_action">
        <ga-button :disabled="true">
          <template #icon><icon-caret-right /></template>
          开机
        </ga-button>
        <ga-button>
          <template #icon><icon-pause /></template>
          关机
        </ga-button>
        <ga-button>
          <template #icon><icon-export /></template>
          迁移
        </ga-button>
        <!-- <ga-button>
          <template #icon><icon-copy /></template>
          克隆
        </ga-button>
        <ga-button>
          <template #icon><icon-caret-right /></template>
          更多
        </ga-button> -->
      </div>
      <icon-close-circle-fill class="icon_close" size="30" @click="handleCancel" />
    </div>
    <Tabs
      v-model="activeKey"
      style="padding: 0 14px"
      :list="vmDetailList"
      @tabChange="(val) => loadModule(val)"
    />
    <component :is="componentName" :id="id"></component>
  </ga-drawer>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { vmDetailList } from "@/constant";
import TagStatus from "@/components/TagStatus/index.vue";

const visible = ref(false);
const record = ref("");
const componentName = ref(null);
const activeKey = ref(vmDetailList[0]["value"]);
// 加载组件
const loadModule = async (moduleName) => {
  const module = await import(`./${moduleName}.vue`);
  componentName.value = module.default;
};
const open = (val) => {
  visible.value = true;
  record.value = val;
};
// 提交方法
const handleOk = () => {
  visible.value = false;
};
// 取消方法
const handleCancel = () => {
  visible.value = false;
};
defineExpose({ open });
// const route = useRoute();
// const { id } = route.params;
// const { name } = route.query;
// const info = ref(null);
// import useLoading from "@/hooks/loading";
// import { Message } from "@garco-design/web-vue";
// const { loading, setLoading } = useLoading(false);

// const fetchPluginDetail = async () => {
//   try {
//     const { code, data } = await getPluginDetail(id);
//     if (code === 20000) info.value = data;
//   } catch (error) {
//     console.log(error);
//   }
// };
onMounted(() => {
  loadModule(activeKey.value);
  console.log("activeKey.value--", activeKey.value);
  // fetchPluginDetail();
});
</script>

<style lang="scss" scoped>
.vm_detail_tlt {
  height: 32px;
  margin-bottom: 16px;
  .vm_name {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 4%;
    text-align: center;
    color: #2e405e;
  }
  .icon_close {
    position: absolute;
    left: -14px;
    top: 74px;
    cursor: pointer;
    background: #fff;
    border-radius: 50%;
    z-index: 999999;
  }
  :deep(.garco-btn-size-medium) {
    border: 1px solid #e2e8f4;
    box-shadow: 0px 2px 6px 0px #0000001a;
    background: #ffffff;
    margin-left: 8px;
    border-radius: 4px;
  }
  :deep(.garco-btn-secondary.garco-btn-disabled) {
    background: #e2e8f4;
  }
}
</style>
